<template>
    <span
        v-if="!editModel"
        v-on:click="_enableEdit"
        class="u-edit-text"
    >{{value}}</span>
    <input
        v-if="editModel"
        type="text"
        v-model="value"
        v-on:blur="_disableEdit"
        v-on:keyup.13="_disableEdit"
        v-is-blur="isBlur"
    >
</template>

<script>
import Vue from 'vue';
import co from 'co';
import util from 'util';
export default {
    props: {
        value:{
            type: String,
            required: false,
            default: ''
        }
    },
    data:function(){
        return {
            editModel: false,
            isBlur: false
        }
    },
    created: function(){

    },
    methods: {
        /**
         * 启动编辑
         */
        _enableEdit: function(){
            // 首先显示编辑元素
            this.editModel = true;
            // 然后进行聚焦，如果不进行延迟，聚焦会失败
            setTimeout(()=>{
                this.isBlur = true;
            },0)

        },
        /**
         * 禁用编辑
         */
        _disableEdit: function(){
            // 首先失去焦点
            this.isBlur = false;
            // 然后应酬编辑缘故
            this.editModel = false;

        }
    }
}
</script>

<style scoped>
    .u-edit-text{
        background-color:#fbfbd4;
    }
</style>
